/**
 * app下载
 *
 * @author liting
 * @since 2016-01-22
 */

@nWidth: 1100px;
@nHeight: 950px;
body {
    min-width: 0;
}

#pbody {
    position: relative;
    overflow: hidden;
    .pages-list {
        position: relative;
        .scroll-page {
            // margin: 0 auto;
            // text-align: center;
            position: relative;
            // min-height: 650px;
            // overflow: hidden;
            .wrapper {
                position: relative;
                width: @nWidth;
                height: 100%;
                margin: 0 auto;
                // min-height: 500px;
            }
            .flexible-box {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -475px;
                margin-left: -550px;
                width: @nWidth;
                min-width: 550px;
                min-height: 475px;
                height: @nHeight;
            }
            p.title {
                position: absolute;
                top: 95px / @nHeight * 100%;
                width: 100%;
                text-align: center;
                font-size: 62px;
                font-size: 3.875rem;
                font-family: "SimHei";
                color: #f0403a;
                line-height: 1;
            }
            p.intro {
                position: absolute;
                top: 183px / @nHeight * 100%;
                width: 100%;
                text-align: center;
                font-size: 24px;
                font-size: 1.500rem;
                font-family: "SimHei";
                color: #666;
                line-height: 1.4;
            }
            /* 第一页 */
            &.page1 {
                background: url(../img/download240/page1-bg.png) #F53544 center no-repeat;
	            background-size: cover;
                .phone1 {
                    position: absolute;
                    width: 320px / @nWidth * 100%;
                    top: 127px / @nHeight * 100%;
                    left: 170px /@nWidth * 100%;
                }
                .phone2 {
                    position: absolute;
                    width: 238px / @nWidth * 100%;
                    top: 184px / @nHeight * 100%;
                    left: 50px / @nWidth * 100%;
                }
                .name {
                    position: absolute;
                    width: 380px / @nWidth * 100%;
                    top: 220px / @nHeight * 100%;
                    left: 587px / @nWidth * 100%;
                }
                .btn {
                    position: absolute;
                    width: 250px / @nWidth * 100%;
                    top: 456px / @nHeight * 100%;
                    left: 587px / @nWidth * 100%;
                }
                .QR {
                    position: absolute;
                    width: 180px / @nWidth * 100%;
                    top: 456px / @nHeight * 100%;
                    left: 863px / @nWidth * 100%;
                }
                .word {
                    position: absolute;
                    width: 500px / @nWidth * 100%;
                    top: 340px / @nHeight * 100%;
                    left: 587px / @nWidth * 100%;
                }
                .link-download {
                    position: absolute;
                    width: 250px / @nWidth * 100%;
                    height: 80px / @nHeight * 100%;
                    top: 456px / @nHeight * 100%;
                    left: 587px / @nWidth * 100%;
                }
                .link-download.ios {
                    top: 456px / @nHeight * 100%;
                }
                .link-download.android {
                    top: 556px / @nHeight * 100%;
                }
            }
            /* 第二页 */
            &.page2 {
                background: #fff;
                .word {
                    position: absolute;
                    width: 241px / @nWidth * 100%;
                    top: 615px / @nHeight * 100%;
                    left: 458px / @nWidth * 100%;
                }
                .bg {
                    position: absolute;
                    width: 873px / @nWidth * 100%;
                    top: 400px / @nHeight * 100%;
                    left: 137px /@nWidth * 100%;
                }
                .logo {
                    position: absolute;
                    width: 190px / @nWidth * 100%;
                    top: 353px / @nHeight * 100%;
                    left: 468px /@nWidth * 100%;
                }
                .loop-logo {
                    position: absolute;
                    width: 216px /@nWidth * 100%;
                    top: 340px / @nHeight * 100%;
                    left: 455px /@nWidth * 100%;
                }
                .mc {
                    position: absolute;
                    width: 190px / @nWidth * 100%;
                    top: 569px / @nHeight * 100%;
                    left: 788px /@nWidth * 100%;
                }
                .loop-mc {
                    position: absolute;
                    width: 216px / @nWidth * 100%;
                    top: 556px / @nHeight * 100%;
                    left: 775px /@nWidth * 100%;
                }
                .sc {
                    position: absolute;
                    width: 190px / @nWidth * 100%;
                    top: 568px / @nHeight * 100%;
                    left: 185px /@nWidth * 100%;
                }
                .loop-sc {
                    position: absolute;
                    width: 216px / @nWidth * 100%;
                    top: 555px / @nHeight * 100%;
                    left: 173px /@nWidth * 100%;
                }
                .star1 {
                    position: absolute;
                    width: 20px / @nWidth * 100%;
                    top: 338px / @nHeight * 100%;
                    left: 430px /@nWidth * 100%;
                }
                .star2 {
                    position: absolute;
                    width: 24px / @nWidth * 100%;
                    top: 378px / @nHeight * 100%;
                    left: 376px /@nWidth * 100%;
                }
                .star3 {
                    position: absolute;
                    width: 14px / @nWidth * 100%;
                    top: 428px / @nHeight * 100%;
                    left: 415px /@nWidth * 100%;
                }
                .star4 {
                    position: absolute;
                    width: 14px / @nWidth * 100%;
                    top: 368px / @nHeight * 100%;
                    left: 673px /@nWidth * 100%;
                }
                .star5 {
                    position: absolute;
                    width: 24px / @nWidth * 100%;
                    top: 400px / @nHeight * 100%;
                    left: 712px /@nWidth * 100%;
                }
            }
            /* 第三页 */
            &.page3 {
                background: #f8f8f8;
                .bg {
                    position: absolute;
                    width: 820px / @nWidth * 100%;
                    top: 305px / @nHeight * 100%;
                    left: 143px /@nWidth * 100%;
                }
                .blue1 {
                    position: absolute;
                    width: 112px / @nWidth * 100%;
                    top: 423px / @nHeight * 100%;
                    left: 117px /@nWidth * 100%;
                }
                .blue2 {
                    position: absolute;
                    width: 51px / @nWidth * 100%;
                    top: 708px / @nHeight * 100%;
                    left: 720px /@nWidth * 100%;
                }
                .green {
                    position: absolute;
                    width: 24px / @nWidth * 100%;
                    top: 670px / @nHeight * 100%;
                    left: 156px /@nWidth * 100%;
                }
                .medal {
                    animation-timing-function: ease-out;
                    position: absolute;
                    width: 260px / @nWidth * 100%;
                    top: 344px / @nHeight * 100%;
                    left: 430px /@nWidth * 100%;
                }
                .orange1 {
                    position: absolute;
                    width: 107px / @nWidth * 100%;
                    top: 726px / @nHeight * 100%;
                    left: 441px /@nWidth * 100%;
                }
                .orange2 {
                    position: absolute;
                    width: 82px / @nWidth * 100%;
                    top: 405px / @nHeight * 100%;
                    left: 825px /@nWidth * 100%;
                }
                .red1 {
                    position: absolute;
                    width: 112px / @nWidth * 100%;
                    top: 646px / @nHeight * 100%;
                    left: 876px /@nWidth * 100%;
                }
                .red2 {
                    position: absolute;
                    width: 17px / @nWidth * 100%;
                    top: 429px / @nHeight * 100%;
                    left: 334px /@nWidth * 100%;
                }
                .yellow {
                    position: absolute;
                    width: 66px / @nWidth * 100%;
                    top: 593px / @nHeight * 100%;
                    left: 367px /@nWidth * 100%;
                }
            }
            /* 第四页 */
            &.page4 {
                background: #fff;
                .bg {
                    position: absolute;
                    width: 800px / @nWidth * 100%;
                    top: 372px / @nHeight * 100%;
                    left: 136px / @nWidth * 100%;
                }
                .phone {
                    position: absolute;
                    width: 706px / @nWidth * 100%;
                    top: 461px / @nHeight * 100%;
                    left: 178px / @nWidth * 100%;
                }
                .pyq {
                    position: absolute;
                    width: 60px / @nWidth * 100%;
                    top: 648px / @nHeight * 100%;
                    left: 894px / @nWidth * 100%;
                }
                .QQ {
                    position: absolute;
                    width: 47px / @nWidth * 100%;
                    top: 347px / @nHeight * 100%;
                    left: 434px / @nWidth * 100%;
                }
                .share {
                    position: absolute;
                    width: 164px / @nWidth * 100%;
                    top: 352px / @nHeight * 100%;
                    left: 613px / @nWidth * 100%;
                }
                .weChat {
                    position: absolute;
                    width: 61px / @nWidth * 100%;
                    top: 409px / @nHeight * 100%;
                    left: 277px / @nWidth * 100%;
                }
                .zone {
                    position: absolute;
                    width: 60px / @nWidth * 100%;
                    top: 512px / @nHeight * 100%;
                    left: 831px / @nWidth * 100%;
                }
            }
            /* 第五页 */
            &.page5 {
                background: #f8f8f8;
                p.title {
                    top: 205px / @nHeight * 100%;
                }
                .pic {
                    position: absolute;
                    width: 170px / @nWidth * 100%;
                    top: 413px / @nHeight * 100%;
                }
                .pic.p1 {
                    left: 90px / @nWidth * 100%;
                }
                .pic.p2 {
                    left: 340px / @nWidth * 100%;
                }
                .pic.p3 {
                    left: 590px / @nWidth * 100%;
                }
                .pic.p4 {
                    left: 840px / @nWidth * 100%;
                }
                //底部
                #footer {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 100px;
                    // line-height: 100px;
                    background: #fff;
                    color: #333;
                    font-family: "Microsoft YaHei";
                    font-size: 18px;
                    .copyright {
                        padding: 0;
                        .company-info {
                            margin: 25px -40px 10px 0;
                        }
                        .right a{
                            margin-left: 20px;
                            img{
                                position: relative;
                                top: 4px;
                            }
                        }
                    }
                }
            }
            /* 第六页 */
            // &.page6 {
            //     background: #fff;
            // }
        }
    }
    /* 右侧浮层 */
    .rightbar-box {
        position: fixed;
        z-index: 1000;
        right: 40px;
        top: 50%;
        margin-top: -50px;
        width: 45px;
        height: 285px;
        padding-top: 3px;
        background: none;
        .icon-list {
            li {
                display: block;
                background: #000;
                opacity: 0.2;
                filter: alpha(opacity=20);
                width: 12px;
                height: 12px;
                border-radius: 20px;
                margin: 10px auto;
                cursor: pointer;
                // background: url(../img/download240/dot.png) 0 -15px no-repeat;
                transition: all .1s linear;
                &.curr {
                    background-color: #db2233;
                    opacity: 1;
                    filter: alpha(opacity=100);
                    // background-position: 1px 0;
                    width: 15px;
                    height: 15px;
                }
            }
            &.not-first {
                li {
                    // background-position: 0 -42px;
                    &.curr {
                        background-color: #e83c46;
                        background-position: 1px -27px;
                    }
                }
            }
        }
        .side-item-list {
            display: none;
            margin-top: 30px;
        }
        .side-item {
            position: relative;
            a {
                display: block;
                width: 45px;
                height: 45px;
                margin-bottom: 10px;
                background-position: -150px -610px;
            }
            &.gotoTop a {
                background-position: -200px -610px;
            }
            .layout {
                position: absolute;
                z-index: -1;
                top: -60px;
                right: 65px;
                border-radius: 2px;
                width: 160px;
                height: 160px;
                display: none;
            }
            &.app {
                .arrow {
                    position: absolute;
                    top: 50%;
                    right: -10px;
                    margin-top: -10px;
                    width: 0;
                    height: 0;
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                    border-left: 10px solid #fff;
                }
                img {
                    border-radius: 5px;
                    width: 100%;
                    height: 100%;
                }
                &:hover .layout {
                    display: block;
                }
            }
        }
    }
    /* 底部箭头 */
    i.bottom-arrow-icon {
        position: absolute;
        height: 26px;
        width: 38px;
        left: 50%;
        margin-left: -19px;
        bottom: 35px;
        background: url(../img/download240/arrow.png) no-repeat;
        -webkit-animation: kf-arrowAnimate 1.2s ease-in-out infinite;
        animation: kf-arrowAnimate 1.2s ease-in-out infinite;
        @keyframes kf-arrowAnimate {
            50% {
                -webkit-transform: translateY(15px);
                transform: translateY(15px);
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
        @-webkit-keyframes kf-arrowAnimate {
            50% {
                -webkit-transform: translateY(15px);
                transform: translateY(15px);
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
    }

	//向上淡入
	.bt-fadeInUp {
	    animation-name: bt-fadeInUp;
		@keyframes bt-fadeInUp {
		    0% {
		        opacity: 0;
		        transform: translate3d(0, 80px,0);
		    }

		    100% {
		        opacity: 1;
		        transform: none;
		    }
		}
	}
	//向下淡入
	.bt-fadeInDown {
	    animation-name: bt-fadeInDown;
		@keyframes bt-fadeInDown {
		    0% {
		        opacity: 0;
		        transform: translate3d(0,-40%,0);
		    }

		    100% {
		        opacity: 1;
		        transform: none;
		    }
		}
	}

	//第三页
	.page3{
		.iconMove(@anName, @beginX, @beginY){
	    	animation-name: @anName;
            animation-timing-function: ease-out;
            @keyframes @anName {
                0% {
                    opacity: 0;
                    transform: translate3d(@beginX, @beginY, 0) scale(0.5);
                }
			    10% {
                    opacity: 1;
			        transform: translate3d(@beginX, @beginY, 0) scale(0.5);
			    }

			    100% {
			        transform: none;
			    }
			}
		}
		.img-an1{
            .iconMove(page3-img1, 346%, 6%);
		}
        .img-an2{
            .iconMove(page3-img2, -365%, -485%);
        }
        .img-an3{
            .iconMove(page3-img3, 1650%, -828%);
        }
        .img-an4{
            .iconMove(page3-img4, 63%, -275%);
        }
        .img-an5{
            .iconMove(page3-img5, -375%, 48%);
        }
        .img-an6{
            .iconMove(page3-img6, -330%, -193%);
        }
        .img-an7{
            .iconMove(page3-img7, 1310%, 280%);
        }
        .img-an8{
            .iconMove(page3-img8, 243%, -214%);
        }

        //盾牌
        .medal-fadeInDown{
            animation-name: medal-fadeInDown;
            animation-timing-function: ease-out;
        }
        @-webkit-keyframes medal-fadeInDown {
            0% {
                opacity: 0;
                transform: translate3d(0,-2000px,0)
            }
            
            // 80%{
            //     transform: translate3d(0,0,0)
            // }
            // 83%{
            //     transform: translate3d(4px,0,0)
            // }
            // 86%{
            //     transform: translate3d(-4px,0,0)
            // }
            // 90%{
            //     transform: translate3d(4px,0,0)
            // }
            // 94%{
            //     transform: translate3d(-4px,0,0)
            // }
            // 98%{
            //     transform: translate3d(4px,0,0)
            // }
            100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
	}
    
	//第四页
	.page4{
		.page4-line-scale{
			animation-timing-function: ease-out;
		    animation-name: page4-line-scale;
	    	transform-origin: 50% 70%;
			@keyframes page4-line-scale {
			    0% {
			        opacity: 0;
			        transform: scale(0);
			    }

			    100% {
			        opacity: 1;
			        transform: scale(1);
			    }
			}
		}
		.page4-iconUp{
		    animation-name: page4-iconUp;
			@keyframes page4-iconUp {
			    0% {
			        opacity: 0;
			        transform: translate3d(0, 100%, 0);
			    }

			    100% {
			        opacity: 1;
			        transform: translate3d(0, 0, 0);
			    }
			}
		}
		.page4-rotateIn{
		    animation-name: page4-rotateIn;
			@keyframes page4-rotateIn {
			    0% {
			        transform-origin: center;
			        transform: rotateY(-360deg);
			        opacity: 0;
			    }

			    100% {
			        transform-origin: center;
			        transform: none;
			        opacity: 1;
			    }
			}
		}
	}

    //第五页
    .page5{
        .page5-bounce{
            animation-name: page5-bounce;
            animation-timing-function: cubic-bezier(0.215,.61,.355,1);
            animation-fill-mode: both;
            @keyframes page5-bounce {
                from,20%,53%,80%,100% {
                    transform: translate3d(0,0,0)
                }

                from {
                    opacity: 0;
                }

                20% {
                    opacity: 0;
                }

                40%,43% {
                    opacity: 1;
                    animation-timing-function: cubic-bezier(0.755,.05,.855,.06);
                    transform: translate3d(0,-50%,0);
                }

                70% {
                    animation-timing-function: cubic-bezier(0.755,.05,.855,.06);
                    transform: translate3d(0,-25%,0);
                }

                90% {
                    transform: translate3d(0,-6%,0);
                }
            }
        }
    }
}